import { useState, useCallback } from "react";

export default function InputForm() {
  const [value, setValue] = useState("change me");

  // 当在 TypeScript 严格模式下，使用 useCallback 需要为回调函数中的参数添加类型注解
  // 当你需要确定某个类型时，可以先将鼠标悬停在你使用的事件处理器(onChange)上，这样可以查看到事件的具体类型
  // 当你需要使用不包含在此列表中的事件时，你可以使用 React.SyntheticEvent 类型，这是所有事件的基类型
  // Dom的常用事件：https://developer.mozilla.org/zh-CN/docs/Web/Events
  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
    (event) => {
      setValue(event.currentTarget.value);
    },
    [setValue]
  );

  return <>
    <input value={value} onChange={handleChange} />
    <p>值：{value}</p>
  </>
}
